<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人简历</title>
    <style>
    body {
    
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
    color: hsla(305, 96%, 71%, 0.959);
    text-align: left;
}

h1 {
    text-align: center;
}

table{
    text-align: center;
    font-weight: bold;
}

p{
    text-indent: 20px;
    text-align: left;
}

h3{
    background-color: hsla(305, 96%, 71%, 0.767);
    text-align: left;
    color: white;
    line-height: 30px;
    padding-left:10px;
}

.dt {
    text-align:left;
}

.container1 {
    width:100%;
    margin: 0 auto;
    padding: 0px 0px;
    margin-top: 0px;
    
}

.header{
    
    margin: 0 auto;
    padding: 0px 0px;
    margin-top: 0px;
}
h3{width:70%;
    color:white;
    line-height: 50px;
    padding-left:10px;
}
h3:hover{
    width: 30%;
    background-color: hsla(305, 96%, 71%, 0.767);
    color: hsl(219, 89%, 82%);
    line-height: 50px;
    padding-left:10px;
    transition :width 4s;
}
    </style>
    <style>
        .container{
            position: absolute;
            height:100%;
            display: grid;
            grid-gap:3px;
            grid-template-columns: repeat(12,1fr);
            grid-template-rows:500px auto 0x;
            grid-template-areas: 
            "h h h h h h h h h h h h"
            "m m m m m m m m m m m m"
            "c c c c c c c c c c c c"}
            .headline{
                position: relative;
                grid-area: h;
        }
            .dt{
                position: relative;
                grid-area:h;
            }
            .content {
                position: relative;
                grid-area: m;
        }

            .footer {
                position: relative;
                grid-area: c;

        
        }
            

    </style>
    <style>
        .dt
            {
                width:270px;
                height:270px;

                transition:width 2s, height 2s;
                -moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
                -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
                -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
                }

        .dt:hover
                {
                width:270px;
                height:270px;
                transform:rotate(360deg);
                -moz-transform:rotate(360deg); /* Firefox 4 */
                -webkit-transform:rotate(360deg); /* Safari and Chrome */
                -o-transform:rotate(360deg); /* Opera */
            }
        
    
    </style>
    <style>
    .footer{
                    width: 100px;
                    height:80px;
                    background-color: rgb(211, 228, 137);
                    border-radius: 10%;
                    line-height: 100px;
                    text-align: center;
                    position:relative;
                    animation:mymove 6s;
                animation-iteration-count:infinite;

                /* Safari and Chrome */
                -webkit-animation:mymove 6s;
                -webkit-animation-iteration-count:infinite;
                }


                @keyframes mymove
                {
                from {left:0px }
                to {left:100%;}

                }

                @-webkit-keyframes mymove /* Safari and Chrome */
                {
                from {right:0px;}
                to {right:100%;}

    </style>

    <style>
        .headline{
            opacity:1.0;
            filter:alpha(opacity=100); 
        }
        .headline:hover{
            opacity:0.4;
            filter:alpha(opacity=40);
        }
        h1{text-shadow: 5px 5px 5px #ff00ea;
}
    </style>
    
    
    
</head>
<body background="4.jpg">
    <div class="container"></div>
        
        <div class="headline"><h1>张箫の个人简历</h1></div> 
            
                
         
        <div class="dt">
            <img src="1.jpg" width="270px" >
            <div>
            </div>   
                
       
                
          
        
        
           
            
        <div class="content">
            <h4>
                        
                    <a href="form.html">表单链接</a> | <a href="http://www.baidu.com">我的搜索</a> | <a href="http://video.sina.com.cn/p/sports/k/v/doc/2017-12-19/150067642393.html">我的爱好</a>
                <ul>
                    <li>
                        <b>姓名：</b>张箫
                    </li>
                    <li>
                        <b>性别：</b>男
                    </li>
                   
                    <li>
                        <b>兴趣：</b>电竞、nba
                    </li>
                </ul>
            </div>
        </div>      
        
            <hr>
                <h3>教育背景Education</h3>
            <table style="width:100%">
                <tr>
                    <td>时间</td>
                    <td>学校</td>
                    <td>专业</td>
                </tr>
                <tr>
                    <td>不详</td>
                    <td>上海对外经贸大学</td>
                    <td>行政管理</td>
                </tr>
            </table>
            <h3>工作经验</h3>
            <ol>
                <li><b>多次参与志愿活动<b></li>
                <li><b>参加过社会实践<b></li>
                <li><b>不知道说什么了<b></li>
                
            </ol>
            <h3>个人介绍</h3>
            <ol></ol>
            <p><b>我是上海对外经贸大学法学院行政管理系的17级学生，我来自云南。（注：其他信息因为心情不好不想写出来）<b></p>
        <div>
        <div class="footer">Go Lakers!</div>
    
    </div>

    
</div>
</body>
</html>